<template>
    <div >
        <mu-appbar style="width: 100%;" color="primary" fixed>
        <mu-button icon slot="left" @click.native="goadd" v-if="this.user.role==20">
            <mu-icon value="add"></mu-icon>
        </mu-button>
        <mu-button icon slot="left" v-else>
            <mu-icon value="menu"></mu-icon>
        </mu-button>
        益多多
        <mu-button flat slot="right"  to="/search">
            <mu-icon value="search"></mu-icon>
        </mu-button>
        </mu-appbar>
        


        <!-- card  start-->
        <el-card :body-style="{ padding: '10px' }" v-for="(act,index) in acts" :key='index' v-if="act.status==0"><!-- v-if="act.area=this.flterable.value1" -->
            <img :src="act.pic" class="image" @click="toDetail(index)">
            <div style="padding: 14px;">
                <span>{{act.title}}</span>
                <div class="bottom clearfix">
                    <time class="time">发布日期：{{ act.uploadtime | formatDate }}</time>
                </div>
            </div>
        </el-card>
        <br>
        <!-- card  end-->
            <br><br>
    </div>
</template>

<script>
import axios from "axios";
import Toast from "muse-ui-toast";
import { formatDate } from "../../date/date.js";
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  data() {
    return {
      areas: [
        "全部",
        "白云区",
        "天河区",
        "越秀区",
        "荔湾区",
        "增城区",
        "从化区",
        "花都区",
        "番禺区",
        "海珠区",
        "黄浦区"
      ],
      schools: ["全部", "华软", "重大"],
      types: ["全部", "支教", "关爱儿童", "关爱老人", "社区服务"],
      filterable: {
        value1: "",
        value2: [],
        value3: []
      },
      acts: [],
      user: [],
      selector: ""
    };
  },
  computed: {
    /* areafilterval(){
      if(this.filterable.value1="全部"){
        return true;
      }else{
        return this.filterable.value1;
      }
    } */
  },
  methods: {
    changearea(value) {
      console.log(value)
    },
    goadd() {
      if (this.user.checkO == 0) {
        Toast.warning("请先前往认证！");
      }
      if (this.user.checkO == 1) {
        this.$router.push("/find/add");
      }
    },
    toDetail(index) {
      this.$router.push({
        path: "/find/detail",
        query: { id: this.acts[index]._id }
      });
    }
  },
  beforeCreate() {
    axios
      .get("/api/user/layin", {})
      .then(res => {
        this.user = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  },
  mounted() {
    axios
      .get("/api/activity/getact", {
        params: {}
      })
      .then(res => {
        this.acts = res.data.data.reverse();
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style>
.card {
  height: 10%;
}
.image {
  width: 100%;
  display: block;
}
.container{
  height: 60px;
}
</style>
